(function($){

    var LightBox = function(){
        var self = this;

        //创建遮罩和弹出窗
        this.popupMask = $('<div id="G-lightbox-mask">');
        this.popupWin = $('<div id="G-lightbox-popup">');
        this.popupComment = $('<div id="lightbox-comment">');
        this.bodyNode = $(document.body);

        //渲染DOM并插入元素
        this.renderDOM();
        this.picViewArea = this.popupWin.find("div.lightbox-pic-view");
        this.popupPic = this.popupWin.find("img.lightbox-img");
        this.picCaptionArea = this.popupWin.find("div.lightbox-pic-caption");
        this.prevBtn = this.popupWin.find("span.lightbox-prev-btn");
        this.nextBtn = this.popupWin.find("span.lightbox-next-btn");
        this.captionText = this.popupWin.find("div .pic-title");
        this.currentIndex = this.popupWin.find("span.lightbox-of-index");
        this.closeBtn = this.popupComment.find("span.close");
        this.detailBtn = this.popupComment.find("span.comment-detail-span-up");
        this.detailInfo = this.popupComment.find("div .comment-header-info");
        this.biggerBtn = this.popupWin.find("span.pic-span-fangda");
        this.smallerBtn = this.popupWin.find("span.pic-span-suoxiao");
        //var lightbox = $(".js-lightbox,[data-role=lightbox]");
        //lightbox.click(function(){
        //    alert("1")
        //})
        this.groupName = null;
        this.groupData = [];
        this.bodyNode.delegate(".js-lightbox,*[data-role=lightbox]","click", function(e){
            e.stopPropagation();
            //alert($(this).attr("data-group"))
            var currentGroupName = $(this).attr("data-group");
            if(currentGroupName != self.groupName){
                self.groupName = currentGroupName;
                self.getGroup();

            }
            self.initPopup($(this));
        });
        this.detailBtn.click(function(){
          self.detailBtn.toggleClass('span-down');
          self.detailInfo.toggleClass('show');
        });
        this.biggerBtn.click(function(){
          var img = document.getElementById('IMG');
          var n = img.getAttribute('step');
          if(!n){
            n = 0;
          }
          if(n<100){
            n++;
          }else{
            return false;
          }
          img.setAttribute('step', n);
          img.setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
          // img.setAttribute('style',
          // 'transform: scale('+0.1*n+','+0.1*n+');
          // -ms-transform: scale('+0.1*n+','+0.1*n+');
          // -webkit-transform: scale('+0.1*n+','+0.1*n+');
          // -o-transform: scale('+0.1*n+','+0.1*n+');
          // -moz-transform: scale('+0.1*n+','+0.1*n+');	');
          // self.popupPic.addClass("img-bigger");
        });
        this.smallerBtn.click(function(){
          var img = document.getElementById('IMG');
          var n = img.getAttribute('step');
          if(!n){
            n = 0;
          }
          if(n>-7){
            n--;
          }else{
            return false;
          }
          img.setAttribute('step', n);
          img.setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
          // img.setAttribute('style',
          // 'transform: scale('+0.1*n+','+0.1*n+');
          // -ms-transform: scale('+0.1*n+','+0.1*n+');
          // -webkit-transform: scale('+0.1*n+','+0.1*n+');
          // -o-transform: scale('+0.1*n+','+0.1*n+');
          // -moz-transform: scale('+0.1*n+','+0.1*n+');	');
          // self.popupPic.addClass("img-bigger");
        });
        this.popupMask.click(function(){

            $(this).fadeOut();
            self.popupWin.fadeOut();
            self.popupComment.fadeOut();
            self.clear = false;
            var img = document.getElementById('IMG');
            var n = img.getAttribute('step');
            if(!n){
              n = 0;
            }else{
              n = 0;
            }
            img.setAttribute('step', n);
            img.setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
        });
        this.closeBtn.click(function(){
            self.popupMask.fadeOut();
            self.popupWin.fadeOut();
            self.popupComment.fadeOut();
            self.clear = false;
            var img = document.getElementById('IMG');
            var n = img.getAttribute('step');
            if(!n){
              n = 0;
            }else{
              n = 0;
            }
            img.setAttribute('step', n);
            img.setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
        })
        this.flag = true;
        this.nextBtn.hover(function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).addClass("lightbox-next-btn-show")
            }
        },function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).removeClass("lightbox-next-btn-show")
            }
        }).click(function(e){
            if(!$(this).hasClass("disabled")&&self.flag){
                self.flag= false;
                e.stopPropagation();
                self.goto("next");
            }
        })
        this.prevBtn.hover(function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).addClass("lightbox-prev-btn-show")
            }
        },function(){
            if(!$(this).hasClass("disabled")&&self.groupData.length>1){
                $(this).removeClass("lightbox-prev-btn-show")
            }
        }).click(function(e){
            if(!$(this).hasClass("disabled"&&self.flag)){
                self.flag = false;
                e.stopPropagation();
                self.goto("prev");
            }
        })
        var timer = null;
        this.clear = false;
        $(window).resize(function(){
            if(self.clear){
                window.clearTimeout(timer);
                timer = window.setTimeout(function(){
                    self.loadPicSize(self.groupData[self.index].src);
                }, 500);
            }
        })


    };
    LightBox.prototype={
        goto:function(dir){
            if(dir=="next"){
                this.index++;
                if(this.index >= this.groupData.length-1){
                    this.nextBtn.addClass("disabled").removeClass("lightbox-next-btn-show");
                }
                if(this.index!=0){
                    this.prevBtn.removeClass("disabled");
                }

                var src = this.groupData[this.index].src;
                this.loadPicSize(src);
            }else if(dir == "prev"){
                this.index--;
                if(this.index<=0){
                    this.prevBtn.addClass("disabled").removeClass("lightbox-prev-btn-show");
                }
                if(this.index!=this.groupData.length-1){
                    this.nextBtn.removeClass("disabled");
                }
                src = this.groupData[this.index].src;
                this.loadPicSize(src);


            }
        },


        loadPicSize:function(sourceSrc){
            var self=this;
            self.popupPic.css({
                width:"auto",
                height:"auto"
            }).hide();
            self.picCaptionArea.hide();

            this.preLoadImg(sourceSrc,function(){

                self.popupPic.attr("src",sourceSrc);
                var picWidth = self.popupPic.width();
                var picHeight = self.popupPic.height();
                self.changePic(picWidth, picHeight);

            });
        },
        changePic:function(width,height){
            var  self=this,
                winWidth = $(window).width(),
                winHeight = $(window).height();
            var scale= Math.min(winWidth/(width+10),winHeight/(height+10),1);
            width = width*scale;
            height = height*scale;
            this.picViewArea.animate({
                width:width-10,
                height:height-10
            });
            this.popupWin.animate({
                width:width-10,
                height:height-10,
                marginLeft:-(width/2),
                top:(winHeight-height)/2
            },function(){
                self.popupPic.css({
                    width:width,
                    height:height
                }).fadeIn();
                self.picCaptionArea.fadeIn();
                self.flag = true;
                self.clear = true;
            });
            console.log(this.index);

            this.captionText.text(this.groupData[this.index].caption);
            this.currentIndex.text("当前索引:"+(this.index+1)+"of"+this.groupData.length);

        },
        preLoadImg:function(src,callback){
            var img = new Image();
            if(!!window.ActiveXObject){
                img.onreadystatechange = function(){
                    if(this.readyState == 'complete'){
                        callback();
                    }
                }
            }else{
                img.onload=function(){
                    callback();
                }
            }
            img.src=src;
        },
        showMaskAndPopup:function(sourceSrc,currentId){
            var self = this;
            this.popupPic.hide();
            this.picCaptionArea.hide();
            this.popupMask.fadeIn();

            var winWidth = $(window).width();
            var winHeight = $(window).height();
            this.picViewArea.css({
                width:winWidth/2,
                height:winHeight/2
            });
            this.popupWin.fadeIn();
            this.popupComment.fadeIn();
            var viewHeight = winHeight/2+10;
            this.popupWin.css({
                width:winWidth/2+10,
                height:winHeight/2+10,
                marginLeft:-(winWidth/2+10)/2,
                top: -viewHeight
            }).animate({
                top:(winHeight-viewHeight)/2
            },function(){
                self.loadPicSize(sourceSrc);
            });

            this.index = this.getIndexOf(currentId);
            var groupDataLength = this.groupData.length;
            if(groupDataLength>1){
                if(this.index === 0){
                    this.prevBtn.addClass("disabled");
                    this.nextBtn.removeClass("disabled");
                }else if(this.index === groupDataLength-1){
                    this.nextBtn.addClass("disabled");
                    this.prevBtn.removeClass("disabled");
                }else{
                    this.nextBtn.removeClass("disabled");
                    this.prevBtn.removeClass("disabled");
                }
            }

        },

        getIndexOf:function(currentId){
            var index=0;
            $(this.groupData).each(function(i){
                index = i;
                if(this.id === currentId){
                    return false;
                }
            });
            return index;
        },

        initPopup:function(currentObj){
            var self = this,
                sourceSrc = currentObj.attr("data-source"),
                currentId = currentObj.attr("data-id");
            this.showMaskAndPopup(sourceSrc,currentId);
        },

        getGroup:function() {
            var self = this;
            var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");
            self.groupData.length = 0;
            groupList.each(function(){
                self.groupData.push({
                    src:$(this).attr("data-source"),
                    id:$(this).attr("data-id"),
                    caption:$(this).attr("data-caption")
                });
            });

        },


        renderDOM:function(){
            var strDom =
            '<div class="lightbox-pic-view">'+
                '<img id="IMG" class="lightbox-img" src="" >'+
            '</div>'+
            '<div class="lightbox-pic-caption">'+
                '<div class="lightbox-caption-area">'+
                  '<div class="pic-title"></div>'+
                  '<a href="picture.html" target="_blank" ><span class="pic-span-yuantu">查看原图</span></a>'+
                  '<span class="pic-span-fangda"></span>'+
                  '<span class="pic-span-suoxiao"></span>'+
                  '<span class="pic-span-xiazai"></span>'+
                '</div>'+
            '</div>';
                // '<div class="lightbox-pic-view">'+
                //     '<span class="lightbox-btn lightbox-prev-btn ">'+
                //     '</span>'+
                //     '<img  class="lightbox-img" src="" >'+
                //     '<span class="lightbox-btn lightbox-next-btn ">'+
                //     '</span>'+
                //     '</div>'+
                //     '<div class="lightbox-pic-caption">'+
                //     '<div class="lightbox-caption-area">'+
                //     '<p class="lightbox-pic-desc"></p>'+
                //     '<span class="lightbox-of-index"></span>'+
                //     '</div>'+
                //     '<span class="lightbox-close-btn"></span>'+
                //     '</div>';
             var strDom_comment =
                 '<div class="comment-div">'+
                   '<div class="comment-header">'+
                     '<div class="comment-header-title"> 水云间</div>'+
                     '<div class="comment-header-detail">详情'+
                     '<span id="comment-detail-span" class="comment-detail-span-up"></span>'+
                     '</div>'+
                     '<div class="comment-header-info">'+
                       '这一季，我只愿，花未谢，雨未消，你未离去'+
                     '</div>'+
                     '<div class="comment-header-icon">'+
                       '<span class="icon-comment"></span><span>2</span> |'+
                       '<span class="icon-love"></span><span>2</span>'+
                     '</div>'+
                     '<span class="close"></span>'+
                   '</div>'+
                   '<div class="comment-content">'+
                     '<div class="comment-one">'+
                       '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                     '</div>'+
                     '<div class="comment-one">'+
                       '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                     '</div>'+
                     '<div class="comment-one">'+
                       '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                     '</div>'+
                     '<span class="span-page up">上一页</span><span class="span-page down">下一页</span>'+
                     '<div class="input-div">'+
                       '<textarea cols="31" rows="5" style="border-radius:5px"></textarea>'+
                     '</div>'+
                     '<button class="btn">发表</button>'+
                   '</div>'+
                 '</div>';
            this.popupWin.html(strDom);
            this.popupComment.html(strDom_comment);
            this.bodyNode.append(this.popupMask,this.popupWin,this.popupComment);

        }

    };
    window['LightBox'] = LightBox;
})(jQuery);

function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
    window.onload = func;
  }else{
    window.onload = function(){
      oldonload();
      func();
    };
  }
}

//重写图片点击弹出插件代码
function popupPicture(){
  var pic = document.getElementsByClassName('popupPic');
  if(pic.length == 0){
    return false;
  }
  var L = pic.length;
  for(var i=0;i<L;i++){
    pic[i].onclick = function(){
      var URL = this.getAttribute('src');
      if(!URL)return false;
      var TITLE = this.getAttribute('title');
      if(!TITLE)return false;
      showPopup(URL, TITLE);
    };
  }
}

function showPopup(url, title){
  var body = document.body;
  var div1 = document.createElement('div');
  var div2 = document.createElement('div');
  var div3 = document.createElement('div');
  div1.setAttribute('id', 'popupMask');
  div2.setAttribute('id', 'popupPic');
  div3.setAttribute('id', 'popupComment');
  div2.innerHTML = "<div id='div2-pic' class='div2-pic'><img id='dragImg' class='div2-img' src=''></div>"+
                   "<div class='div2-text'>"+
                      "<div class='text-title'>水云间</div>"+
                      '<a href="picture.html" target="_blank" ><span class="pic-span yuantu">查看原图</span></a>'+
                      "<span class='pic-span fangda'></span>"+
                      "<span class='pic-span suoxiao'></span>"+
                      "<span class='pic-span xiazai'></span>"+
                   "</div>";
  div3.innerHTML = '<div class="comment-div">'+
                  '<div class="comment-header">'+
                    '<div class="comment-header-title"> 水云间</div>'+
                    '<div class="comment-header-detail">详情'+
                    '<span id="comment-detail-span" class="comment-detail-span-up"></span>'+
                    '</div>'+
                    '<div class="comment-header-info">'+
                      '这一季，我只愿，花未谢，雨未消，你未离去'+
                    '</div>'+
                    '<div class="comment-header-icon">'+
                      '<span class="icon-comment"></span><span>2</span> |'+
                      '<span class="icon-love"></span><span>2</span>'+
                    '</div>'+
                    '<span class="close"></span>'+
                  '</div>'+
                  '<div class="comment-content">'+
                    '<div class="comment-one">'+
                      '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                    '</div>'+
                    '<div class="comment-one">'+
                      '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                    '</div>'+
                    '<div class="comment-one">'+
                      '<span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>'+
                    '</div>'+
                    '<span class="span-page up">上一页</span><span class="span-page down">下一页</span>'+
                    '<div class="input-div">'+
                      '<textarea cols="31" rows="5" style="border-radius:5px"></textarea>'+
                    '</div>'+
                    '<button class="btn">发表</button>'+
                  '</div>'+
                '</div>';
  body.appendChild(div1);
  body.appendChild(div2);
  body.appendChild(div3);

  dragPic();
  var img = document.getElementById('popupPic').getElementsByTagName('img');
  img[0].setAttribute('src', url);
  var  winWidthReal = $(window).width(),
       winHeightReal = $(window).height(),
      winWidth = winWidthReal - 560,
      winHeight = winHeightReal,
      width = $('#dragImg').width(),
      height = $('#dragImg').height();
  var scale= Math.min(winWidth/(width+10),winHeight/(height+10),1);
  width = width*scale;
  height = height*scale;
  // debugger
  $('#div2-pic').animate({
      width:width-10,
      height:height-10
  });
  $('#popupPic').animate({
      width:width-10,
      height:height-10,
      marginLeft:-(width/2),
      top:(winHeight-height)/2
  });
  var text = document.getElementById('popupPic').getElementsByClassName('text-title');
  text[0].innerHTML = title;
  var text2 = document.getElementById('popupComment').getElementsByClassName('comment-header-title');
  text2[0].innerHTML = title;
  div1.onclick = function(){
    body.removeChild(div1);
    body.removeChild(div2);
    body.removeChild(div3);
  };
  var close = div3.getElementsByClassName('close');
  close[0].onclick = function(){
    body.removeChild(div1);
    body.removeChild(div2);
    body.removeChild(div3);
  };
  var detailBtn = div3.getElementsByClassName('comment-detail-span-up');
  var detailInfo = div3.getElementsByClassName('comment-header-info');
  detailBtn[0].onclick = function(){
    $('.comment-detail-span-up').toggleClass('span-down');
    $('.comment-header-info').toggleClass('show');
  };
  var biggerBtn = div2.getElementsByClassName('fangda');
  var smallerBtn = div2.getElementsByClassName('suoxiao');
  biggerBtn[0].onclick = function(){
    var img = div2.getElementsByTagName('img');
    var n = img[0].getAttribute('step');
    if(!n){
      n = 0;
    }
    if(n<100){
      n++;
    }else{
      return false;
    }
    img[0].setAttribute('step', n);
    img[0].setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
  };
  smallerBtn[0].onclick = function(){
    var img = div2.getElementsByTagName('img');
    var n = img[0].getAttribute('step');
    if(!n){
      n = 0;
    }
    if(n>-7){
      n--;
    }else{
      return false;
    }
    img[0].setAttribute('step', n);
    img[0].setAttribute('style', '-webkit-transform:scale('+(1+n*0.1)+','+(1+n*0.1)+');transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');-ms-transform: scale('+(1+n*0.1)+','+(1+n*0.1)+');');
  };
}

// function changePic(){
//   var biggerBtn = document.getElementById('popupPic').getElementsByClassName('fangda');
//   var smallerBtn = document.getElementById('popupPic').getElementsByClassName('suoxiao');
//   function ImageChange(args) {
//       var oImg = document.getElementById("dragImg");
//       if (args) {
//           oImg.width = oImg.width * 1.2;
//           oImg.height = oImg.height * 1.2;
//           debugger
//    // oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';
//       }
//       else {
//           oImg.width = oImg.width / 1.2;
//           oImg.height = oImg.height / 1.2;
//       }
//   }
//   biggerBtn[0].onclick = function(){
//     ImageChange(true);
//   };
//   smallerBtn[0].onclick = function(){
//     ImageChange(false);
//   };
// }

//处理元素移动的函数代码
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/30);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/30);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/30);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/30);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

//首页四张图的轮播图代码
function indexSliderShow(){
  var container = document.getElementById('container');
  var button = document.getElementById('buttons');
  if(!button)return false;
  var buttons = button.getElementsByTagName('span');
  var index = 1;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var animated  = false;
  var timer;

  function showButtons(){
      if(!animated){
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className == 'on'){
                buttons[i].className = '';

            }
        }
        console.log(typeof index);
        // debugger;
        buttons[index - 1].className = 'on';

        // debugger;
      }
  }
  next.onclick = function(){
    if(index == 4){
        index = 1;
    }else{
        index += 1;
    }
    showButtons();
    // debugger;
    moveElement("list",-660*(index-1),0,5);

  };
  prev.onclick = function(){
    if(index == 1){
        index = 4;
    }else{
        index -= 1;
    }
      showButtons();
      moveElement("list",-660*(index-1),0,5);

  };
  function play(){
      timer = setInterval(function(){
          next.click();
      }, 2000);
  }
  function stop(){
      clearInterval(timer);
  }
  for (var i=0;i<buttons.length;i++){
      buttons[i].onclick = function(){
        if(this.className == 'on'){
            return;
        }
          var myIndex = this.getAttribute('index');
          index = parseInt(myIndex);
          animated = true;
          moveElement("list",-660*(myIndex-1),0,5);
          animated = false;
          showButtons();

      };
  }
  container.onmouseout = play;
  container.onmouseover = stop;
  play();
}

//处理协会成员头像移动的函数代码（复制片段）
function moveElementCopy(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

//协会成员头像的轮播代码
function memberSliderShow(){
  var container = document.getElementById('slider-member-div');
  var index = 1;
  var prev = document.getElementById('member-up');
  var next = document.getElementById('member-down');
  // if(!prev||next){
  //   return false;
  // }
  var animated  = false;
  var timer;
  var member = document.getElementById('member');
  if(!member) return false;
  var total =  member.offsetHeight/150;
  next.onclick = function(){
    if(index == (total-1)){
        index = 1;
    }else{
        index += 1;
    }
    moveElementCopy("member",0,-150*(index-1),10);

  };
  prev.onclick = function(){
    if(index == 1){
        index = (total-1);
    }else{
        index -= 1;
    }
    moveElementCopy("member",0,-150*(index-1),10);

  };
  function play(){
      timer = setInterval(function(){
          next.click();
      }, 2000);
  }
  function stop(){
      clearInterval(timer);
  }
  container.onmouseout = play;
  container.onmouseover = stop;
  play();
}


//原始的轮播图代码
function sliderShow(){
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var animated  = false;
    var timer;
    function showButtons(){
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        buttons[index - 1].className = 'on';
    }
    function animate(offset){
        animated = true;
        var newleft = parseInt(list.style.left) + offset;
        var time = 2000;
        var interval = 10;
        var speed = offset/(time/interval);

        function go(){
            if(speed < 0 && parseInt(list.style.left) > newleft || speed > 0 && parseInt(list.style.left) < newleft ){
                list.style.left = parseInt(list.style.left) + speed + 'px';
                setTimeout(go, interval);
            }else{
                animated = false;
                list.style.left = newleft + 'px';
                if(newleft > -660){
                    list.style.left = -3300 + 'px';
                }
                if(newleft < -3300){
                    list.style.left = -660 + 'px';
                }

            }
        }
        go();

    }

    function play(){
        timer = setInterval(function(){
            next.click();
        }, 2000);
    }
    function stop(){
        clearInterval(timer);
    }

    next.onclick = function(){
        if(!animated){
            if(index == 5){
                index = 1;
            }else{
                index += 1;
            }
            showButtons();
            animate(-660);
        }

    };
    prev.onclick = function(){
        if(!animated){
            if(index == 1){
                index = 5;
            }else{
                index -= 1;
            }
            showButtons();
            animate(660);
        }


    };
    for (var i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            if(!animated){
              if(this.className == 'on'){
                  return;
              }
              var myIndex = this.getAttribute('index');
              var offset = -660*(myIndex - index);
              animate(offset);
              index = myIndex;
              showButtons();
            }
        };
    }
    container.onmouseout = play;
    container.onmouseover = stop;
    play();
}

//给导航添加active点击样式
function checkNav(){
  var nav = document.getElementById('nav');
  var li = nav.getElementsByTagName('li');
  var L = li.length;
  var index = parseInt(li[L-2].getAttribute('index'));
  console.log(index);
  for(var i=0;i<L;i++){
    li[i].className = '';
  }
  if(index<=4){
    li[index].className = 'active';
  }else{
    li[7].className = 'active';
  }
}

//首页要闻切换
function changeNews(){
  var buttonOne = document.getElementById('paneOne');
  if(!buttonOne) return false;
  var buttonTwo = document.getElementById('paneTwo');
  if(!buttonTwo) return false;
  var paneOne = document.getElementById('activity-pane');
  if(!paneOne)return false;
  var paneTwo = document.getElementById('inf-pane');
  if(!paneTwo)return false;
  $('#paneOne>a:first-child').on('click',function(){
    paneOne.style.display = 'block';
    paneTwo.style.display = 'none';
    $('#paneOne>a:first-child').css('background','#ccc')
    $('#paneOne>a:last-child').css('border-top-color','#ccc');
    $('#paneTwo>a:first-child').css('background','#333')
    $('#paneTwo>a:last-child').css('border-top-color','transparent');
  });
  $('#paneOne>a:first-child').on('mouseover',function(){
    if($('#activity-pane').css('display')  === 'none') {
      $('#paneOne>a:first-child').css('background','#DCDCDC')
      $('#paneOne>a:last-child').css('border-top-color','#DCDCDC');
    }
  });
  $('#paneOne>a:first-child').on('mouseout',function(){
    if($('#activity-pane').css('display')  === 'none') {
      $('#paneOne>a:first-child').css('background','#333')
      $('#paneOne>a:last-child').css('border-top-color','transparent');
    }else {
      $('#paneOne>a:first-child').css('background','#ccc')
      $('#paneOne>a:last-child').css('border-top-color','#ccc');      
    }
  });
  $('#paneTwo>a:first-child').on('click',function(){
    paneOne.style.display = 'none';
    paneTwo.style.display = 'block';
    $('#paneOne>a:first-child').css('background','#333')
    $('#paneOne>a:last-child').css('border-top-color','transparent');
    $('#paneTwo>a:first-child').css('background','#ccc')
    $('#paneTwo>a:last-child').css('border-top-color','#ccc');
  });
  $('#paneTwo>a:first-child').on('mouseover',function(){
    if($('#inf-pane').css('display')  === 'none') {
      $('#paneTwo>a:first-child').css('background','#DCDCDC')
      $('#paneTwo>a:last-child').css('border-top-color','#DCDCDC');
    }
  });
  $('#paneTwo>a:first-child').on('mouseout',function(){
    if($('#inf-pane').css('display')  === 'none') {
      $('#paneTwo>a:first-child').css('background','#333')
      $('#paneTwo>a:last-child').css('border-top-color','transparent');
    }else {
      $('#paneTwo>a:first-child').css('background','#ccc')
      $('#paneTwo>a:last-child').css('border-top-color','#ccc');      
    }
  });
}

//图片上传功能代码
function showUpLoad(){
  var mask = document.getElementById('loadMask');
  var btn = document.getElementsByClassName('span-close');
  var btn1 = document.getElementById('picBtn');
  btn1.onclick = function(){
    $('#loadMask').fadeIn();
    $('#loadInput').fadeIn();
  };
  mask.onclick = function(){
    $('#loadMask').fadeOut();
    $('#loadInput').fadeOut();
  };
  btn[0].onclick = function(){
    $('#loadMask').fadeOut();
    $('#loadInput').fadeOut();
  };
}

function drawPic(){
  var body = document.body;
  var div1 = document.createElement('div');
  var div2 = document.createElement('div');
  div1.setAttribute('id', 'loadMask');
  div2.setAttribute('id', 'loadInput');
  div2.innerHTML = "<div class='load-title'>上传图片</div>"+
                   "<div class='load-input'><input type='text' placeholder='作品标题'></div>"+
                   "<div class='load-text'>"+
                   "<textarea rows='10' cols='58' placeholder='图片描述'/></textarea></div>"+
                   "<div class='load-btns'>"+
                   "<span class='span-select'><select><option value='风景'>风景</option><option value='人物'>人物</option><option value='人文'>人文</option><option value='美食'>美食</option></select></span>"+
                   "<span class='span-choose'><button><span class='choose-img'></span>选择文件</button></span>"+
                   "<span class='span-upload'><button>上传</button></span>"+
                   "</div>"+
                    "<div class='span-close'></div>";
  body.appendChild(div1);
  body.appendChild(div2);
}

//图片拖动的JS代码
function dragPic(){
  //获取div的四个顶点坐标
		 function getDivPosition()
		 {
		 var odiv=document.getElementById('popupPic');
	 //  alert(odiv.getBoundingClientRect().left);
	 // alert(odiv.getBoundingClientRect().top);

		 var xLeft,xRigh,yTop,yBottom;
		 return {
			xLeft:odiv.getBoundingClientRect().left,
			xRigh:odiv.getBoundingClientRect().left+600,
			yTop:odiv.getBoundingClientRect().top,
			yBottom:odiv.getBoundingClientRect().top+400
			};
		 }

 //div的四个顶点坐标
	var XL	=	getDivPosition().xLeft,
			XR = getDivPosition().xRigh,
			XT = getDivPosition().yTop,
			XB = getDivPosition().yBottom;


	var params = {
		left: 0,
		top: 0,
		currentX: 0,
		currentY: 0,
		flag: false
	};
	//获取相关CSS属性
	var getCss = function(o,key){
		return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
	};

	//拖拽的实现
	var startDrag = function(bar, target, callback){
		if(getCss(target, "left") !== "auto"){
			params.left = getCss(target, "left");
		}
		if(getCss(target, "top") !== "auto"){
			params.top = getCss(target, "top");
		}
		//o是移动对象
		bar.onmousedown = function(event){
			params.flag = true;
			if(!event){
				event = window.event;
				//防止IE文字选中
				bar.onselectstart = function(){
					return false;
				}
			}
			var e = event;
			params.currentX = e.clientX;
			params.currentY = e.clientY;
		};
		document.onmouseup = function(){
			params.flag = false;
			if(getCss(target, "left") !== "auto"){
				params.left = getCss(target, "left");
			}
			if(getCss(target, "top") !== "auto"){
				params.top = getCss(target, "top");
			}
		};
		document.onmousemove = function(event){
			var e = event ? event: window.event;
			if(params.flag){
				var nowX = e.clientX, nowY = e.clientY;
				var disX = nowX - params.currentX, disY = nowY - params.currentY;
				if(nowX > XL&&nowX < XR && nowY > XT && nowY < XB){
					target.style.left = parseInt(params.left) + disX + "px";
					target.style.top = parseInt(params.top) + disY + "px";
				}
				}
			if (typeof callback == "function") {
				callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
			}
		};
	};
	var oBox = document.getElementById("dragImg");
  var oBar = document.getElementById("dragImg");
  startDrag(oBar, oBox);
}
//底部分页的active样式代码
function addActive(){
  var page = $('.page-button');
  if(!page)return false;
  var L = page.length;
  for(var i=0;i<L;i++){
    page[i].onclick = function(){
      for(var i=0;i<L;i++){
        var pageCopy = $('.page-button');
        $(pageCopy[i]).removeClass('active');
      }
      $(this).addClass('active');

    };
  }
}


// addLoadEvent(sliderShow);
addLoadEvent(indexSliderShow);
addLoadEvent(memberSliderShow);
addLoadEvent(checkNav);
addLoadEvent(changeNews);
addLoadEvent(popupPicture);
addLoadEvent(drawPic);
addLoadEvent(showUpLoad);
addLoadEvent(addActive);
// addLoadEvent(dragePic);
